<!--
 * @Author: Wayne 13235388225@163.com
 * @Date: 2023-10-09 14:42:14
 * @LastEditors: Wayne 13235388225@163.com
 * @LastEditTime: 2023-10-09 15:24:22
 * @FilePath: \Jkc-app-front-new\src\views\partnerManagement\partnerManagement.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: Wayne 13235388225@163.com
 * @Date: 2023-10-09 14:42:14
 * @LastEditors: Wayne 13235388225@163.com
 * @LastEditTime: 2023-10-09 14:44:44
 * @FilePath: \Jkc-app-front-new\src\views\partnerManagement\partnerManagement.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <div class="view-title">合伙人管理</div>

    <div style="display: flex">
      <div>
        <el-form ref="formSearch" :model="searchForm">
          <el-form-item label="合伙人手机号" label-width="100px">
            <el-input v-model="searchForm.mobile"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div style="margin-left: 10px">
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </div>
    </div>

    <el-button
      type="primary"
      size="mini"
      @click="handlerAddPartner"
      v-permission="['partnerManagement:add']"
      >添加合伙人
    </el-button>

    <!-- table -->

    <el-table
      :data="partnerTableData"
      v-loading="loading"
      element-loading-text="正在加载中"
      :header-cell-style="{
        borderColor: '#F0F0F0',
        height: '51px',
        background: '#F0F0F0',
        color: '#333',
      }"
      :row-style="{ height: '51px' }"
      :cell-style="{ borderColor: '#F0F0F0' }"
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="id" label="ID" align="center"> </el-table-column>
      <el-table-column prop="name" label="合伙人姓名" align="center">
      </el-table-column>
      <el-table-column prop="mobile" label="合伙人手机号" align="center">
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="创建时间"
        align="center"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="160" align="center">
        <template slot-scope="scope">
          <el-button
            @click="handleCheckDistributors(scope.row)"
            type="text"
            size="small"
            >查看分销员</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="page_box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNow"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 添加弹窗 -->
    <el-dialog
      title="添加合伙人"
      :visible.sync="dialogVisiblePartner"
      :close-on-click-modal="false"
      width="30%"
      @close="handleCloseDialog"
    >
      <div class="dialog_add_box">
        <el-form
          :model="partnerRuleForm"
          :rules="rulesPartner"
          ref="ruleFormPartner"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="合伙人姓名" prop="name">
            <el-input v-model="partnerRuleForm.name"></el-input>
          </el-form-item>

          <el-form-item label="合伙人手机" prop="mobile">
            <el-input
              v-model="partnerRuleForm.mobile"
              maxlength="11"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog">取 消</el-button>
        <el-button type="primary" @click="sureDialog('ruleFormPartner')"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 查看分销员弹窗 -->
    <el-dialog
      title="查看分销员"
      :visible.sync="dialogVisibleDistributors"
      width="40%"
    >
      <el-table
        :data="appUserData"
        :header-cell-style="{
          borderColor: '#F0F0F0',
          background: '#F0F0F0',
          color: '#333',
        }"
        :cell-style="{ borderColor: '#F0F0F0' }"
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column prop="id" label="ID" align="center"> </el-table-column>
        <el-table-column prop="nick" label="昵称" align="center">
          <template slot-scope="scope">{{
            scope.row.nick ? scope.row.nick : "默认用户"
          }}</template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" align="center">
        </el-table-column>
        <el-table-column
          prop="created_at"
          label="创建时间"
          align="center"
        ></el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <!--        <el-button @click="dialogVisibleDistributors  = false">取 消</el-button>-->
        <el-button type="primary" @click="dialogVisibleDistributors = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getAppAgentList, addAppAgent } from "@/api/partnerManagement.js";

import { getAppUserList } from "@/api/userManagement.js";

export default {
  name: "PartnerManagement",
  data() {
    return {
      searchForm: {
        mobile: "",
      },
      pageNow: 1,
      pageSize: 10,
      total: null,
      partnerTableData: [],
      appUserData: [],
      dialogVisiblePartner: false,
      partnerRuleForm: {
        name: "",
        mobile: "",
      },
      rulesPartner: {
        name: [
          { required: true, message: "请输入合伙人姓名", trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入合伙人手机", trigger: "blur" },
        ],
      },
      loading: true,
      // 查看分销员弹窗显隐
      dialogVisibleDistributors: false,
    };
  },
  mounted() {
    this.getAppAgentList();
  },
  methods: {
    // 查看分销员
    handleCheckDistributors(val) {
      this.dialogVisibleDistributors = true;
      let params = {
        page_size: 9999,
        level: 1,
        belong_agent_id: val.id,
      };
      getAppUserList(params).then((res) => {
        this.appUserData = res.data;
      });
    },

    // 获取全部合伙人
    getAppAgentList() {
      getAppAgentList({
        mobile: this.searchForm.mobile,
        page_now: this.pageNow,
        page_size: this.pageSize,
      }).then((res) => {
        if (res.code == 1) {
          this.loading = false;
          this.partnerTableData = res.data;
          this.total = res.page_info.total_count;
        } else {
          this.loading = false;
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 添加合伙人接口
    addAppAgent() {
      addAppAgent({
        name: this.partnerRuleForm.name,
        mobile: this.partnerRuleForm.mobile,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.dialogVisiblePartner = false;
          this.partnerRuleForm.name = "";
          this.partnerRuleForm.mobile = "";
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 搜索
    handleSearch() {
      this.getAppAgentList();
    },

    // 新增弹窗-叉号
    handleCloseDialog() {
      this.dialogVisiblePartner = false;
      this.partnerRuleForm.name = "";
      this.partnerRuleForm.mobile = "";
    },

    // 添加合伙人
    handlerAddPartner() {
      this.dialogVisiblePartner = true;
    },

    // 添加弹窗确定
    sureDialog(ruleFormPartner) {
      this.$refs[ruleFormPartner].validate((valid) => {
        if (valid) {
          this.addAppAgent();
          this.$refs.ruleFormPartner.clearValidate();
        } else {
          return false;
        }
      });
    },

    // 添加弹窗取消
    cancelDialog() {
      this.dialogVisiblePartner = false;
      this.partnerRuleForm.name = "";
      this.partnerRuleForm.mobile = "";
    },

    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAppAgentList();
    },
    handleCurrentChange(val) {
      this.pageNow = val;
      this.pageSize = 10;
      this.getAppAgentList();
    },
  },
};
</script>

<style lang="scss" scoped></style>
